<template>
  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
    <div class="rightPanel-background" />
    <div class="rightPanel">
      <div class="title">
        <h4>{{title}}</h4>
        <i :class="show?'el-icon-close':''" @click="closeModal" class="handle-button" />
      </div>
      <div class="rightPanel-items">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import { addClass, removeClass } from '@/utils/utils';

export default {
    name: 'RightPanel',
    props: {
        title: {
            default: '',
            type: String
        },
        clickNotClose: {
            default: false,
            type: Boolean
        },
        buttonTop: {
            default: 250,
            type: Number
        },
        visibility: {
            default: false,
            type: Boolean
        }
    },
    data () {
        return {
        };
    },
    computed: {
        theme () {
            return '#1890ff';
        },
        show () {
            return this.visibility;
        }
    },
    watch: {
    },
    mounted () {
        this.insertToBody();
    },
    beforeDestroy () {
        const elx = this.$refs.rightPanel;
        elx.remove();
    },
    methods: {
        addEventClick () {
            window.addEventListener('click', this.closeSidebar);
        },
        closeSidebar (evt) {
            const parent = evt.target.closest('.rightPanel');
            if (!parent) {
                // this.show = false;
                window.removeEventListener('click', this.closeSidebar);
            }
        },
        insertToBody () {
            const elx = this.$refs.rightPanel;
            const body = document.querySelector('body');
            body.insertBefore(elx, body.firstChild);
        },
        closeModal () {
            this.$emit('handleCancel');
        }
    }
};
</script>

<style>
.showRightPanel {
  overflow: hidden;
  position: relative;
  width: calc(100% - 15px);
}
</style>

<style lang="scss" scoped>
.rightPanel-background {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
  background: rgba(0, 0, 0, .2);
  z-index: -1;
}

.rightPanel {
  box-sizing: border-box;
  padding: 0 24px;
  max-width: 660px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
  transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 1001;
  .title{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #d8deec;
    h4{
      color: rgba(0, 0, 0, 0.85);
      font-size: 16px;
    }
  }
}
.rightPanel-items{
  padding-top: 20px;
}

.show {
  transition: all .3s cubic-bezier(.7, .3, .1, 1);

  .rightPanel-background {
    z-index: 1000;
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  .rightPanel {
    transform: translate(0);
  }
}

.handle-button {
  width: 48px;
  height: 48px;
  right: 48px;
  text-align: center;
  font-size: 24px;
  border-radius: 6px 0 0 6px !important;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  color: #333;
  line-height: 48px;
  i {
    font-size: 24px;
    line-height: 48px;
  }
}
</style>
